<template>
  <mt-navbar title="退款" title-width="440rpx">
    <template #right>
      <view class="flex items-center" @click="goHistory">
        <uv-icon name="clock" color="#727687" size="32rpx"></uv-icon>
        <text class="text-24rpx text-#727687 ml-8rpx">退款记录</text>
      </view>
    </template>
  </mt-navbar>
  <view class="safety-150">
    <view class="flex items-start bg-[rgba(247,119,92,0.1)] px-24rpx py-16rpx mb-16rpx">
      <uv-icon name="error-circle-fill" color="#F7775C" size="32rpx"></uv-icon>
      <view class="flex-1 min-w-0 text-28rpx text-#F7775C ml-8rpx"> 保证金线上发起退款的前提是会员到期，并且没有在处理中的线索，否则不可退款 </view>
    </view>
    <view class="bg-#ffffff p-32rpx">
      <view class="text-32rpx text-#1C213E font-bold">退款金额</view>
      <view class="ipt-box">
        <input
          v-model="modelForm.withdrawAmount"
          maxlength="10"
          class="ipt"
          type="number"
          :placeholder="'可退款金额￥' + amountTransfer(userInfo.bailAmount, 2, true)"
        />
        <text class="unit">￥</text>
        <text class="btn" @click="handleAll">全部退款</text>
      </view>
      <view class="text-28rpx text-#727687 mt-24rpx">退款方式-原路退回</view>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="w-full" @click="handleSubmit">退款</mt-button>
    </view>
  </view>
</template>

<script setup>
import { withdrawalRecordaddWithdrawApprove } from '@/subCommission/api/index';
import { getProvinceInfo } from '@/api/index.js';
import { amountTransfer } from '@/utils/tools';
import userStore from '@/store/user';
const user = userStore();

const modelForm = ref({
  withdrawAmount: ''
});

function handleAll() {
  modelForm.value.withdrawAmount = amountTransfer(userInfo.value.bailAmount, 0);
}

function goHistory() {
  // uni.navigateTo({
  //   url: '/subCommission/pages/withdrawalHistory'
  // });
}

function handleSubmit() {
  const params = JSON.parse(JSON.stringify(modelForm.value));
  params.withdrawAmount = params.withdrawAmount * 1000;
  if (!params.withdrawAmount) {
    uni.showToast({
      icon: 'none',
      title: '请输入退款金额'
    });
    return;
  }
  if (params.withdrawAmount > userInfo.value.bailAmount) {
    uni.showToast({
      icon: 'none',
      title: '退款金额不能大于可退款金额'
    });
    return;
  }

  withdrawalRecordaddWithdrawApprove(params).then(() => {
    uni.showToast({
      icon: 'none',
      title: '操作成功',
      duration: 1000
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1000);
  });
}

const userInfo = ref({});
function getUserInfo() {
  getProvinceInfo().then((res) => {
    userInfo.value = res.data;
    user.setUserInfo(res.data);
  });
}

onShow(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.ipt-box {
  position: relative;
  margin-top: 100rpx;
  .ipt {
    font-size: 36px;
    font-weight: bold;
    padding: 0 130rpx 0 60rpx;
    border-bottom: 2rpx solid #e6e6e6;
  }
  :deep(.uni-input-input) {
    font-size: 36px !important;
    font-weight: bold;
  }
  .unit {
    position: absolute;
    left: 0;
    bottom: 28rpx;
    font-size: 54rpx;
    font-weight: bold;
    color: #1c213e;
  }
  .btn {
    position: absolute;
    right: 0;
    bottom: 28rpx;
    font-size: 28rpx;
    color: #1484ee;
  }
}
</style>
